<template>
	<Echart
		id="leftCenter1"
		:options="options"
		class="left_center_inner"
		ref="daycharts"
	/>
</template>

<script>
//import { graphic } from 'echarts'

export default {
	props: ["info"],
	data() {
		return {
			options: {},
			lineColor: [
				"#FF5733",
				"#409EFF",
				"#67C23A",
				"#9966FF",
				"#F5A623",
				"#1890FF",
				"#F56C6C",
				"#30B46A",
				"#FF9900",
				"#7953D2",
			],
		};
	},
	created() {},
	watch: {
		info: {
			handler(newValue, oldValue) {
				if (newValue) {
					this.init();
				}
			},
			deep: true,
		},
	},
	beforeDestroy() {},
	methods: {
		init() {
			this.options = {
				legend: {
					x: "center", //可设定图例在左、右、居中
					y: "10px",
					data: this.info.lineName,
					top: 0,
					textStyle: {
						fontSize: 12,
						color: "#F1F1F3",
					},
				},
				xAxis: {
					type: "category",
					data: this.info.xData,
					boundaryGap: false, // 不留白，从原点开始
					splitLine: {
						show: true,
						lineStyle: {
							color: "rgba(31,99,163,.2)",
						},
					},
					axisLine: {
						// show:false,
						lineStyle: {
							color: "rgba(31,99,163,.1)",
						},
					},
					axisLabel: {
						color: "#7EB7FD",
						fontWeight: "500",
						//rotate: 45,
					},
				},
				yAxis: {
					// `单位 :${this.info.unit}`
					name: "",
					type: "value",
					nameTextStyle: {
						color: "#fff",
						fontSize: 12,
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: "rgba(31,99,163,.2)",
						},
					},
					axisLine: {
						lineStyle: {
							color: "rgba(31,99,163,.1)",
						},
					},
					axisLabel: {
						color: "#7EB7FD",
						fontWeight: "500",
					},
				},
				tooltip: {
					trigger: "axis",
					backgroundColor: "rgba(0,0,0,.6)",
					borderColor: "rgba(147, 235, 248, .8)",
					textStyle: {
						color: "#FFF",
					},
				},
				grid: {
					//布局
					show: true,
					left: "10px",
					right: "10px",
					bottom: "10px",
					top: "30px",
					containLabel: true,
					borderColor: "#1F63A3",
				},
				series: [
					// {
					// 	data: this.info.yData[0],
					// 	type: 'line',
					// 	symbol: 'none',
					// 	//点样式
					// 	itemStyle: {
					// 		color: '#5083FF',
					// 	},
					// 	name: this.info.cname,
					// },
				],
			};

			for (let i = 0; i < this.info.yData.length && i < 10; i++) {
				let temp = {
					data: [],
					type: "line",
					symbol: "none",
					//点样式
					itemStyle: {
						color: "#5083FF",
					},
					name: "",
				};
				temp.data = this.info.yData[i];
				temp.itemStyle.color = this.lineColor[i];
				temp.name = this.info.lineName[i];
				this.options.series.push(temp);
			}
		},
	},
};
</script>
<style lang="scss" scoped></style>
